<template>
  <div class="hello">
    <hr/>
    <hr/>
    <hr/>
    <br>
    <input v-model="msg"/>
    <h1>{{ msg }}</h1>

    <!--    <h3>{{this.msggp('nihaoaaa')}}</h3>-->
    <h3 @click="seesee">点我see see</h3>
    <div class="panel panel-default">
      <div class="panel-body">
        <slot name="panel_head">panel_head Nothing Here From the parent !!!</slot>
      </div>
    </div>
    <div class="panel panel-warning">
      <div class="panel-heading">
        <!--        <h3 class="panel-title">Panel title</h3>-->
      </div>
      <div class="panel-body">
        <slot>Here anonimous haven't been passed</slot>
      </div>
    </div>

<!--子组件内容-->
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="panel panel-danger">
        <div class="panel-heading">
          <h3 class="panel-title">List For scoped slots</h3>
        </div>
        <div class="panel-body">
          <ul class="list-group">
            <slot name="list" v-for="book in books" :xx="book">1</slot>
            <!--            V-for 循环 ，:xx=book 是绑定 xx 属性为 book ,方便父组件调用。 父组件的props 只是一个作用域标识符 ，访问方式为： props.子组件变量-->

          </ul>
        </div>
      </div>


      <hr/>
      <hr/>
      <hr/>
      <br>
    </div>
  </div>


</template>

<script>
  import $ from 'jquery';
  import 'bootstrap/dist/css/bootstrap.min.css';
  import 'bootstrap/dist/js/bootstrap.min';

  export default {
    name: "HelloWorld",
    props: {
      msggp: {
        type: String
      },
      books: {
        type: Array,
        required: true,
      },

    },
    data() {
      return {
        msg: "Welcome to Your Vue.js App",
        // p_msg: this.msg_parent,
      };
    },
    methods:
      {

        seesee: function () {
          console.log(this);
          this.$emit('greet');
        }
      }
    ,
    mounted() {
      console.log(this.books);
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1,
  h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
